import { Button, DatePicker, Flex, Form, Input, Table, TableProps } from 'antd';
import style from '../css/LoginLog.module.scss'
import { DatePickerProps } from 'antd/lib';
import { SearchOutlined, UploadOutlined } from '@ant-design/icons';
import { useEffect, useRef, useState } from 'react';
import { loginloglists, loginlogserch } from '../utils/request';
import moment from 'moment';
import Padination from '../components/Pagination';
import { exportTableToPdf } from '../components/exportToPdf'
function LoginLog() {
    const [form] = Form.useForm();
    // 日期选择
    const onChange: DatePickerProps['onChange'] = (date, dateString) => {
        console.log(date, dateString);
    };
    
    // 表格数据
    interface DataType {
        key: string;
        order: string;
        account: string;
        time:string;
        terminal: string;
        IP:string;
        address:string
    }
        
    const columns: TableProps<DataType>['columns'] = [
        {
            title: '序号',
            dataIndex: 'order',
            key: 'order',
            render: (__, _, index) => index + 1,
            width:'121px'
        },
        {
            title: '登录账号',
            dataIndex: 'account',
            key: 'account',
            width:'213px'
        },
        {
            title: '登录时间',
            dataIndex: 'time',
            key: 'time',
            width:'254px',
            render:(text)=><span>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</span>
        },
        {
            title: '登录终端',
            key: 'terminal',
            dataIndex: 'terminal',
            width:'162px'
        },
        {
            title: '登录IP',
            key: 'IP',
            dataIndex: 'IP',
            width:'140px'
        },
        {
            title: 'MAC地址',
            key: 'address',
            dataIndex: 'address',
            width:199
        },
    ];

    const [mockData,setMockData] = useState([])
    const [data,setData] = useState<DataType[]>([])
    useEffect(()=>{
        loginloglists().then(res=>{
            setMockData(res.data)
            setData(res.data.slice(0,10))
        }).catch(err=>{
            console.log(err)
        })
    },[])
    const getshowsize = (data: any) => {
        setData(mockData.slice((data.current-1)*data.pageSize,data.pageSize*data.current))
    }
    // const data: DataType[] = [
    //     {
    //         key: '1',
    //         order: '1',
    //         account: 'GLY',
    //         time: '2018-06-06  16:20:10',
    //         terminal: 'Chrome浏览器',
    //         IP:'192.168.10.1',
    //         address:'03:03:30:3A:3B:3C',
    //     },
    //     {
    //         key: '2',
    //         order: '2',
    //         account: 'GLY',
    //         time: '2018-06-06  16:20:10',
    //         terminal: 'Chrome浏览器',
    //         IP:'192.168.10.1',
    //         address:'03:03:30:3A:3B:3C',
    //     },
    //     {
    //         key: '3',
    //         order: '3',
    //         account: 'GLY',
    //         time: '2018-06-06  16:20:10',
    //         terminal: 'Chrome浏览器',
    //         IP:'192.168.10.1',
    //         address:'03:03:30:3A:3B:3C',
    //     },
    //     {
    //         key: '4',
    //         order: '4',
    //         account: 'GLY',
    //         time: '2018-06-06  16:20:10',
    //         terminal: 'Chrome浏览器',
    //         IP:'192.168.10.1',
    //         address:'03:03:30:3A:3B:3C',
    //     },
    //     {
    //         key: '5',
    //         order: '5',
    //         account: 'GLY',
    //         time: '2018-06-06  16:20:10',
    //         terminal: 'Chrome浏览器',
    //         IP:'192.168.10.1',
    //         address:'03:03:30:3A:3B:3C',
    //     },
    //     {
    //         key: '6',
    //         order: '6',
    //         account: 'GLY',
    //         time: '2018-06-06  16:20:10',
    //         terminal: 'Chrome浏览器',
    //         IP:'192.168.10.1',
    //         address:'03:03:30:3A:3B:3C',
    //     },
    //     {
    //         key: '7',
    //         order: '7',
    //         account: 'GLY',
    //         time: '2018-06-06  16:20:10',
    //         terminal: 'Chrome浏览器',
    //         IP:'192.168.10.1',
    //         address:'03:03:30:3A:3B:3C',
    //     },
    //     {
    //         key: '8',
    //         order: '8',
    //         account: 'GLY',
    //         time: '2018-06-06  16:20:10',
    //         terminal: 'Chrome浏览器',
    //         IP:'192.168.10.1',
    //         address:'03:03:30:3A:3B:3C',
    //     },
    //     {
    //         key: '9',
    //         order: '9',
    //         account: 'GLY',
    //         time: '2018-06-06  16:20:10',
    //         terminal: 'Chrome浏览器',
    //         IP:'192.168.10.1',
    //         address:'03:03:30:3A:3B:3C',
    //     },
    //     {
    //         key: '10',
    //         order: '10',
    //         account: 'GLY',
    //         time: '2018-06-06  16:20:10',
    //         terminal: 'Chrome浏览器',
    //         IP:'192.168.10.1',
    //         address:'03:03:30:3A:3B:3C',
    //     },
    // ];
    // 重置
    const reset=()=>{
        console.log('重置')
        loginloglists().then(res=>{
            setMockData(res.data)
            setData(res.data.slice(0,10))
            form.resetFields()
        }).catch(err=>{
            console.log(err)
        })
    }
    // 搜索
    const serch=()=>{
        console.log('搜索')
        form.validateFields().then(values => {
            console.log('Validated values: ', values);
            loginlogserch(values).then(res=>{
                setMockData(res.data)
                setData(res.data.slice(0,10))
            }).catch(err=>{
                console.log(err)
            })
        }).catch(info => {
            console.log('Validate Failed:', info);
        });
    }
    // 导出
    const tableRef = useRef<HTMLDivElement>(null);
    const exports= async ()=>{
        if (tableRef.current) {
            await exportTableToPdf(tableRef.current, 'Loginlog.pdf');
        }
    }
    return ( 
        <>
            <Form
                className={style.searchboxs}
                form={form}
            >
                <Flex align='center' style={{height:'100%'}}>
                    <Form.Item label='登录账号' name='account' rules={[{required:true}]} colon={false} className={style.itemstyle}>
                        <Input placeholder='请输入' style={{width:200,height:32,borderRadius:0}}></Input>
                    </Form.Item>
                    <Form.Item label='登录时间' name='time' rules={[{required:true}]} colon={false} className={style.itemstyle}>
                        <DatePicker style={{width:200,height:32,borderRadius:0}} onChange={onChange} />
                    </Form.Item>
                </Flex>
                <Flex>
                    <Button onClick={()=>reset()} style={{
                        width:61,
                        height:32,
                        marginRight:10
                    }}>重置</Button>
                    <Button onClick={()=>serch()} style={{
                        width:75,
                        height:32
                    }} type="primary" icon={<SearchOutlined />}>
                        搜索
                    </Button>
                </Flex>
            </Form>
            <div className={style.datalists}>
                <Flex justify='flex-end'>
                    <Button onClick={()=>exports()} style={{width:75,height:32,borderRadius:0,color:'#00A76F',borderColor:'#00A76F'}} icon={<UploadOutlined />}>导出</Button>
                </Flex>
                <div ref={tableRef}>
                    <Table<DataType> rowKey='login_Id' className={style.tabledata} columns={columns} pagination={false} dataSource={data} />
                </div>
                {/* 分页器 */}
                <Padination total={mockData.length} showsize={getshowsize}></Padination>
            </div>
        </>
     );
}

export default LoginLog;